<template>
    <div class="settings-container">
        <div class="avatar">
            <img
                :src="userInfo.avatarUrl"
                alt=""
            >
        </div>
        <div class="form">
            <ul class="form-control">
                <li>
                    <input
                        placeholder="昵称"
                        type="text"
                        v-model="userInfo.nickName"
                    >
                </li>
                <li>
                    <picker
                        @change="bindPickerChange"
                        v-model="genderIndex"
                        :range="gender"
                    >
                        <view class="picker">
                            {{gender[genderIndex]}}
                        </view>
                    </picker>
                </li>
                <li>
                    <input
                        type="text"
                        v-model="userInfo.province"
                        placeholder="省份"
                    >
                </li>
                <li>
                    <input
                        type="text"
                        v-model="userInfo.city"
                        placeholder="城市"
                    >
                </li>

            </ul>
            <div class="form-action">
                <button @click="updateUserInfo" type="primary">确认修改</button>
            </div>
        </div>

    </div>
</template>
<script>
export default {
    data() {
        return {
            genderIndex: 0,
            gender: ['未知','男', '女'],
            userInfo:{}
        };
    },
    methods: {
        bindPickerChange (e) {
            this.genderIndex=e.target.value;
        },
        updateUserInfo(){
            // wx.showToast({
            //     title:'接口开发中...',
            //     icon:'none',
            //     duration:2000
            // });
            const info=this.userInfo;
            const userData={
                id:info.id,
                nickname:info.nickName,
                sex:this.genderIndex,
                province:info.province,
                city:info.city
            }
            // console.log(userData);
            // return;
            this.$http.post({
                url:'m=Index&a=updateUserInfo',
                data:userData
            }).then(res=>{
                if(res.errcode==0){
                    wx.showToast({
                        title:'保存成功',
                        duration:1000
                    });
                    // 更新本地储存
                    userData.openid=info.openid;
                    userData.avatarUrl=info.avatarUrl;
                    userData.nickName=info.nickName
                    delete userData.nickname;
                    wx.setStorage({
                        key:'userInfo',
                        data:userData,
                        success(res){
                            console.log('更新本地存储成功');
                        }
                    });
                }
            });
        }
    },
    created(){
        const that=this;
        // 从本地存储中获取用户信息
        wx.getStorage({
            key:'userInfo',
            success(res){
                // 更新数据
                console.log(res.data);
                that.userInfo=res.data;
            }
        })
        
    },
    mounted(){
        wx.setNavigationBarTitle({
            title:'个人信息设置'
        });
    }
    
};
</script>
<style lang="scss">
// 导入公共样式
@import './static/styles/reset.scss';
page{
    background-color: $bgColor;
}
.settings-container {
    background-color: $bgColor;
    height: 100%;
    .avatar {
        height: 300rpx;
        background: $baseColor;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
            width: 200rpx;
            height: 200rpx;
            border-radius: 50%;
        }
    }
    .form {
        .form-control {
            li {
                margin: 20rpx;
                padding: 20rpx;
                background: #fff;
            }
        }
        .form-action {
            button {
                position: fixed;
                bottom: 0;
                width: 100%;
                background-color: $baseColor;
            }
        }
    }
}
</style>


